<template>
	<view class="myCard">
		<view class="recommend f-column">
			<!-- <view class="title">
				精选推荐
			</view> -->
			<view class="list f-column" v-for="(item,index) in list" :key="index" >
				<view class="list_item" :style="{background:'#fff'}">
					<!-- <view class="title" v-if="item.status == 1">
						今日推荐
					</view> -->
					<view class="content">
						<view class="item">
							<!-- <view class="icon">
								<image :src="item.icon" mode="" class="image"></image>
							</view> -->
							<view class="entityList">
								<view class="num" style="font-size: 32rpx;">
									{{item.name}}
								</view>
								<!-- <view class="name">
									<text>{{item.illustrate}}</text>
									<view class="right">
										<text class="themeColor"></text>
									</view>
								</view> -->
								<view class="item_top_row x-bc mb-1 mt-1" v-for="(item1,itemIndex) in item.log" :key="itemIndex">
									<view>{{item1.card_type_name}}</view>
									<view>{{item1.number}}次</view>
								</view>
								<view class="item_top_row x-bc mb-2 name mt-2" >
									<view class="item_over">{{item.illustrate}}</view>
								</view>
							</view>
						</view>
						<view class="conBot">
							<view class="f-row ">
								<view class="down">
									<view class="">
										优惠价
									</view>
									<view class="">
									</view>
								</view>
								<view class="down_price">
									¥{{item.all_price}}
								</view>
							</view>
							<view class="f-row goNear" @click="pay(item.id,1,'card')">
								<image src="../../static/images/index/btnBg.png" mode="widthFix"
									style="width: 20rpx;height: 20rpx;margin-right: 10rpx;"></image>
								<view class="">
									前往购买
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="noMore" v-if="last_page==form.page&&list.length!=0"
				style="text-align: center;color: #797575;margin-top: 20rpx;padding-bottom: 60rpx;">
				数据加载完成
			</view>
			<u-empty text="暂无列表哦~~" mode="list" v-if="list.length==0" margin-top='50'></u-empty>
		</view>
	</view>
</template>

<script>
	import {
		kabawList
	} from '@/request/api.js'
	export default {
		data() {
			return {
				// list: [{
				// 		name: '锦江店优惠洗车',
				// 		msg: '锦成都市江区才华大街20号',
				// 		id: 1,
				// 		bh: 'ABCD65343434',
				// 		gl: '9.9',
				// 		status: 1,
				// 		icon: '../../static/logo.png'
				// 	},
				// 	{
				// 		name: '锦江店优惠洗车',
				// 		msg: '锦成都市江区才华大街20号',
				// 		id: 1,
				// 		bh: 'ABCD65343434',
				// 		gl: '20',
				// 		status: 0,
				// 		icon: '../../static/logo.png'
				// 	}
				// ],
				list: [],
				form: {
					page: 1,
					type_data: 1
				},
				last_page: 1,
			}
		},
		onReachBottom() {
			// console.log(111)
			if (this.form.page < this.last_page) {
				this.form.page = this.form.page + 1
				this.getList()
			}
		},
		onLoad() {
			this.form.page = 1
			this.list = []
			this.getList()
		},
		methods: {
			async getList() {
				let res = await kabawList(this.form)
				this.list = this.list.concat(res.data.data)
				this.last_page = res.data.last_page
				console.log(this.list, 'list')
			},
			selectItem(index) {
				this.curIndex = index;
				this.form.type_data = index + 1
				this.form.page = 1
				this.list = []
				this.getList()
			},
			goCard(i) {
				uni.navigateTo({
					url: '/my_pages/orderDetails/orderDetails?id=' + i
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.myCard {
		font-size: 28rpx;

		.recommend {
			padding: 0 20rpx;
			// margin-top: 40rpx;

			.title {
				font-size: 30rpx;
				line-height: 20px;
				color: #222222;
				font-weight: 600;
			}

			.list {
				margin-top: 20rpx;

				.content {
					// background-color: #fff;
					// box-shadow: 0px 0px 10px rgba(8, 23, 56, 0.05);
					// border-radius: 10px;
					// padding: 20rpx;
					// margin-top: 20rpx;

					.conBot {
						align-items: flex-end;

						.f-row {
							display: flex;
							align-items: flex-end;
						}

						.goNear {
							background: #2CB9A4;
							color: #fff;
							height: 60rpx;
							justify-content: center;
							align-items: center;
							border-radius: 10rpx;
							padding: 2rpx 15rpx;
							font-size: 30rpx;
							align-items: center;
						}

						display: flex;
						justify-content: space-between;
						color: #2CB9A4;

						.down {
							background: #C0EAE4;
							justify-content: center;
							display: flex;
							flex-direction: column;
							align-items: center;
							padding: 10rpx;
							font-size: 22rpx;
							border-radius: 10rpx;
							margin-right: 10rpx;
						}

						.down_price {
							margin-right: 10rpx;
						}

						.price {
							margin-right: 10rpx;
						}
					}
				}

				.list_item {
					display: flex;
					flex-direction: column;
					background: #2CB9A4;
					border-radius: 20rpx;
					padding: 20rpx;

					.title {
						color: #fff;
						font-size: 30rpx;
						font-weight: 600;
					}

					.item {
						display: flex;
						color: #505050;
						margin: 15rpx 0;
						border-bottom: 0.5px solid rgba(217, 217, 217, 0.3);
						padding-bottom: 15rpx;
						box-sizing: border-box;
						background: #fff;
						border-radius: 20rpx;

						.icon {
							width: 72rpx;
							height: 72rpx;
							width: 100rpx;
							height: 100rpx;

							.image {
								width: 100%;
								height: 100%;
							}
						}

						.entityList {
							flex: 1;
							display: flex;
							flex-direction: column;
							overflow: hidden;
							text-overflow: ellipsis;
							justify-content: space-between;
							.item_top_row{
								margin-left: 15rpx;
							}
							.name {
								display: flex;
								justify-content: space-between;
								margin-left: 15rpx;
								// white-space: nowrap;
								// overflow: hidden;
								text-overflow: ellipsis;
								color: #BABABA;
								font-size: 28rpx;

								.image {
									width: 26rpx;
									height: 26rpx;
									margin-right: 10rpx;
								}
							}

							.num {
								margin-left: 15rpx;
								margin-top: 5rpx;
								color: #2CB9A4;
								font-size: 28rpx;
								white-space: nowrap;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}
				}
			}
		}
	}
</style>